<template>
  <div class="attribute-page app-container">
    <div class="left">
      <!-- highlight-current node-key="id" :default-expanded-keys="['期货']" :default-checked-keys="['主观']"> -->
      <el-tree ref="tree" :data="treeData" :props="{ children: 'list', label: 'name' }" @node-click="handleNodeClick"
      highlight-current node-key="expanded" :default-expanded-keys="[0]" :default-checked-keys="[1]">
      </el-tree>
    </div>
    <div class="right">
      <el-form ref="dataForm" :inline="true" label-width="82px" :model="dataForm">
        <!-- <el-form-item label="属性名称" prop="name">
          <el-input v-model="dataForm.strategyMethod" clearable placeholder="请输入属性名称"></el-input>
        </el-form-item> -->
        <el-form-item style="margin-left: 20px">
          <!-- <el-button type="primary" size="small" @click="allQuery">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button> -->
          <el-button type="danger" size="small" @click="addOrUpdateTypeHandle()">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        border fit size="mini"
        max-height="637"
        :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        style="width: 100%;">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="name" label="属性名称" align="center"></el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="{row}">
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addOrUpdateTypeHandle(row)">
              编辑
            </el-button>
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-delete" @click="delectTypeHandle(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <addOpen v-if="addOpenVisible" ref="addOpen" @openClose="findAllInvestMarket"></addOpen>
  </div>
</template>

<script>
import { findAllInvestMarket, deleteStrategyMethodById } from '@/api/setting'
import { deepClone } from '@/utils'
import addOpen from './addOpen'

export default {
  name: 'Attribute',
  components: { addOpen },
  data() {
    return {
      addOpenVisible: false,
      treeData: [],
      _list: [],
      list: [],
      style: '',
      marketId: '',
      dataForm: {
        strategyMethod: '',
        strategySubject: ''
      },
    }
  },
  created() {
    this.findAllInvestMarket()
  },
  methods: {
    findAllInvestMarket() {
      findAllInvestMarket({
        ...this.dataForm
      }).then(res => {
        this.treeData = res.body
        if(!this.list.length) {
          res.body[0].list[0].list[0].expanded = 1
          res.body[0].list[0].expanded = 0
          this.marketId = res.body[0].list[0].list[0].marketId
          this.style = res.body[0].list[0].list[0].id

          this.list = res.body[0].list[0].list[0].strategyList
          this._list = deepClone(this.list)
        }else {
          this.list = []
        }
      })
    },
    addOrUpdateTypeHandle(row) {
      this.addOpenVisible = true
      this.$nextTick(() => {
        this.$refs.addOpen.init(this.marketId, this.style, row)
      })
    },
    delectTypeHandle(row) {
      this.$confirm('确认删除？', '提示', {
        customClass: 'del-model',
        type: 'warning'
      })
        .then(_ => {
          this.deleteStrategyMethodById(row.type, row.id)
        })
        .catch(_ => {})
    },
    deleteStrategyMethodById(type, methodId) {
      deleteStrategyMethodById({
        type,
        methodId
      }).then(res => {
        this.findAllInvestMarket()
      })
    },
    allQuery() {
      this.list = deepClone(this._list)
      const keyWord = this.dataForm.name
      var arr = []
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].name.match(keyWord) != null) {
          arr.push(this.list[i])
        }
      }
      this.list = arr
    },
    resetForm() {
      this.$refs.dataForm.resetFields()
      this.list = deepClone(this._list)
    },
    handleNodeClick(data) {
      if(data.strategyList) {
        this.marketId = data.marketId
        this.style = data.id
        this.list = data.strategyList
        this._list = deepClone(data.strategyList)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.attribute-page {
  display: flex;
  justify-content: space-between;
  .left {
    width: 16%;
    min-width: 180px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;
  }
  .right {
    width: calc(84% - 20px);
    padding: 6px;
    border: 1px solid #ddd;
  }
}
</style>

